<script setup lang="ts">
import {Location} from "@element-plus/icons-vue";
import IP from "../../../assets/icons/IP.vue";
import Gender from "../../../assets/icons/Gender.vue";
import Tag from "../../../assets/icons/Tag.vue";
import {useRoute, useRouter} from "vue-router";
import {UserInfoVO} from "../../../../generated";
import {useUserStore} from "../../../stores/userStore.ts";

defineProps<{
  userInfo: UserInfoVO;
}>();

let router = useRouter();
let route = useRoute();
let userStore = useUserStore();

const handleEditProfile = () => {
  router.push('/profile/edit')
}
</script>

<template>
  <div class="user-info-card">
    <div class="user-header">
      <img
          :src="userInfo.avatar"
          alt="avatar"
          class="avatar"
      >
      <div class="user-details">
        <h2>{{ userInfo.username }}</h2>
        <p class="account">{{ userInfo.account }}</p>
        <p class="score">全站排名 {{ 10000 }}</p>
      </div>
    </div>

    <div class="follow-stats">
      <div class="stat-item">
        <div>关注了</div>
        <div class="number">{{ 0 }}</div>
      </div>
      <div class="divider"></div>
      <div class="stat-item">
        <div>关注者</div>
        <div class="number">{{ 0 }}</div>
      </div>
    </div>

    <button v-if="route.params.account == userStore.loginUser.account" class="edit-profile-btn"
            @click="handleEditProfile">编辑个人资料
    </button>

    <el-divider/>

    <h4>个人简介</h4>
    <p class="description">{{ userInfo.profile }}</p>

    <div class="info-items">
      <div class="info-item" v-if="userInfo.ipAddress">
        <IP class="icon"/>
        <span>{{ userInfo.ipAddress }}</span>
      </div>

      <div class="info-item" v-if="userInfo.currentResidence">
        <el-icon size="15px" class="icon">
          <Location/>
        </el-icon>
        <span>{{ userInfo.currentResidence }}</span>
      </div>

      <div class="info-item" v-if="userInfo.gender !== undefined">
        <Gender class="icon"/>
        <span>{{ userInfo.gender === 0 ? '男' : userInfo.gender === 1 ? '女' : '保密' }}</span>
      </div>

      <div class="tags-container" v-if="userInfo.tagList && userInfo.tagList.length">
        <div class="info-item">
          <Tag class="icon"/>
          <span>标签</span>
        </div>
        <div class="tags">
          <el-tag
              v-for="tag in userInfo.tagList"
              :key="tag"
              class="tag"
              size="small"
              effect="plain"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.user-info-card {
  background: white;
  border-radius: 8px;
  padding: 21px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.user-header {
  text-align: center;
  margin-bottom: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.user-details h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.account {
  color: #8c8c8c;
  margin: 5px 0;
  font-size: 14px;
}

.score {
  color: #262626;
  font-size: 14px;
}

.follow-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.divider {
  width: 1px;
  height: 20px;
  background: #e8e8e8;
  margin: 0 20px;
}

.stat-item {
  text-align: center;
  color: #595959;
  font-size: 14px;
}

.stat-item .number {
  margin-top: 4px;
  font-weight: 600;
}

.edit-profile-btn {
  width: 100%;
  padding: 8px 0;
  background: #f0f9f6;
  border: none;
  border-radius: 4px;
  color: #00af9b;
  cursor: pointer;
  font-size: 14px;
}

.description {
  color: #262626bf;
  line-height: 1.625;
  font-size: 14px;
  text-align: justify;
  word-break: break-all;
  margin-bottom: 16px;
  margin-top: 16px;
}

.info-items {
  margin-top: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #595959;
  font-size: 14px;
}

.icon {
  margin-right: 8px;
  width: 16px;
  height: 16px;
  color: #8c8c8c;
}

.tags-container {
  margin-top: 16px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  margin-left: 24px;
}

.tag {
  background-color: #f5f5f5;
  border-color: #e8e8e8;
  color: #595959;
}
</style> 